<template>
  <div style="height: 68vh; background-color: aliceblue; padding: 12px">
    <el-row style="height: calc(100% - 100px)">
      <el-col :span="12">
        <div style="color: #888; padding: 0 0 20px 30px">
          成员搜索：
          <el-input
            placeholder="请输入关键字"
            v-model="keyword"
            style="width: 200px; margin-left: 10px"
          ></el-input>
        </div>
        <div
          style="
            width: 28vw;
            height: 56vh;
            display: block;
            border-right: 1px solid #eee;
            overflow: auto;
          "
        >
          <div
            v-for="(emp, index) in filterEmps"
            :key="index"
            style="margin-bottom: 10px"
          >
            <el-checkbox
              :value="
                chooseEmps.findIndex(
                  (x) => x.ECV_TargetID == emp.ECV_TargetID
                ) != -1
              "
              @change="
                (ischecked) => {
                  empChoose(emp, ischecked)
                }
              "
            >
              <div style="display: flex; align-items: center">
                <div
                  style="
                    width: 40px;
                    height: 40px;
                    border-radius: 5px;
                    background-color: #1890ff;
                    display: block;
                    position: relative;
                    text-align: center;
                    margin-right: 20px;
                  "
                >
                  <!--头像-->
                  <div style="font-size: 20px; color: white; line-height: 40px">
                    {{ emp.USR_Name ? emp.USR_Name.substring(0, 1) : '' }}
                  </div>
                </div>
                <div>
                  {{ emp.USR_Name }}
                </div>
              </div>
            </el-checkbox>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div
          style="
            width: 28vw;
            max-height: 60vh;
            display: flex;
            flex-wrap: wrap;
            align-items: start;
            overflow-y: auto;
          "
        >
          <div
            v-for="(emp, index) in chooseEmps"
            :key="index"
            style="
              height: 25px;
              min-width: 65px;
              padding: 5px 14px;
              text-align: center;
              line-height: 25px;
              border-radius: 4px;
              margin: 10px;
              background-color: #eee;
              cursor: pointer;
            "
          >
            {{ emp.USR_Name }}{{ emp.USR_Phone }}
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="display: flex; justify-content: end; padding: 20px 40px">
      <el-button
        round
        type="primary"
        style="width: 100px; height: 50px"
        @click="sure"
      >
        确定
      </el-button>
    </div>
  </div>
</template>
<script>
import { getUsingEmployees } from '@/api/flowCenter/organiztion/employeeManage'
export default {
  data: function () {
    return {
      keyword: null,
      emps: [],
      chooseEmps: [],
      filterEmps: [],
    }
  },
  watch: {
    keyword(val) {
      this.filterEmps = this.emps.filter((x) => x.USR_Name.includes(val))
    },
  },
  methods: {
    empChoose(emp, ischecked) {
      if (ischecked) {
        this.chooseEmps.push(emp)
      } else {
        this.chooseEmps.splice(
          this.chooseEmps.findIndex((x) => x.ECV_TargetID == emp.ECV_TargetID),
          1
        )
        this.$forceUpdate()
      }
    },
    getEmployees() {
      getUsingEmployees().then(({ data }) => {
        this.emps = data
        this.filterEmps = data
      })
    },
    sure() {
      this.$emit('sure', this.chooseEmps)
    },
  },
  created: function () {
    this.getEmployees()
  },
}
</script>
